img {
  vertical-align: middle;
}

.container {
  position: relative;
}

/* 头部 */
.header {
  height: 0.88rem;
  line-height: .88rem;
  text-align: center;
  position: relative;
  font-size: .36rem;
  background: linear-gradient(to bottom, #fe4b0a, #f85915);
  background: -webkit-linear-gradient(to bottom, #fe4b0a, #f85915);
  background: -moz-linear-gradient(to bottom, #fe4b0a, #f85915);
  font-weight: normal;
  color: #fff;

}

.header .back {
  display: block;
  width: .28rem;
  height: 0.28rem;
  border-left: .03rem solid #fff;
  border-top: .03rem solid #fff;
  position: absolute;
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* shopinfo */
.shopinfo {
  background: linear-gradient(to bottom, #f65b17, #fff);
  background: -webkit-linear-gradient(to bottom, #f65b17, #fff);
  background: -moz-linear-gradient(to bottom, #f65b17, #fff);
  font-size: .29rem;
  color: #fff;
  display: flex;
  padding-top: .1rem;
  padding-left: .43rem;
  height: 5.82rem;
  position: relative;
}

.shopinfo>img {
  width: 0.96rem;
  height: .95rem;
  margin-right: .25rem;
}

.shopinfo .status {
  width: 2.34rem;
}

.shopinfo .status img {
  width: 1.04rem;
  height: 0.28rem;
}

.shopinfo .status .qiang {
  line-height: .46rem;
}

.shopinfo .text {
  font-size: 1.01rem;
  position: absolute;
  color: rgba(57, 60, 79, .1);
  font-weight: 600;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
}

/* main */
.main {
  position: absolute;
  top: 2.9rem;
  margin: 0 .15rem;
  padding-left: .29rem;
  padding-top: .36rem;
  font-size: .28rem;
  color: #797979;
  overflow: hidden;
  background-color: #fff;
}

.main .discount h1 {
  font-size: .41rem;
  color: #333;
  margin-left: .1rem;
}

.main .discount p {
  color: #9d9d9d;
}

.main .discount p em {
  color: #de9b44;
}

.main .discount .barOut {
  background-color: #fbf4ea;
  height: 0.17rem;
  margin-right: .3rem;
  margin-top: .83rem;
  border-radius: .08rem;
}

.main .discount .barInner {
  width: 66%;
  background: linear-gradient(to right, #f4dcb2, #e1af50);
  background: -webkit-linear-gradient(to right, #f4dcb2, #e1af50);
  background: -moz-linear-gradient(to right, #f4dcb2, #e1af50);
  border-radius: .08rem;
  height: 100%;
}

.main .discount ul {
  margin-right: .3rem;
  display: flex;
  justify-content: space-between;
  margin-top: .16rem;
}

.main .discount ul li {
  width: .72rem;
  height: 0.4rem;
  line-height: .4rem;
  text-align: center;
}

.main .discount ul li:nth-child(3) {
  position: relative;
  border-radius: .03rem;
  background-color: #d8b87d;
  color: #fff;
}

.main .discount ul li:nth-child(3)::before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.127rem;
  height: 0.127rem;
  background-color: #d8b87d;

}

.main .button {
  width: 100%;
  height: 1rem;
  border-radius: .5rem;
  font-size: .26rem;
  background: linear-gradient(to right, #f0c995, #fa4201);
  background: -webkit-linear-gradient(to right, #f0c995, #fa4201);
  background: -moz-linear-gradient(to right, #f0c995, #fa4201);
  color: #fff;
  text-align: center;
  margin-top: .65rem;
  box-shadow: 0 .1rem .6rem rgba(0, 0, 0, .1);
}

.main .button p:first-child {
  font-size: .35rem;
}

.main .friendHelp {
  margin-top: .8rem;
}

.main .friendHelp h1 {
  color: #333;
  font-size: .48rem;
  width: 2.53rem;
  margin: 0 auto;
  position: relative;
}

.main .friendHelp h1::before,
.main .friendHelp h1::after {
  content: '';
  display: block;
  position: absolute;
  background: linear-gradient(to right, #fefbf8, #e9c289);
  background: -webkit-linear-gradient(to right, #fefbf8, #e9c289);
  background: -moz-linear-gradient(to right, #fefbf8, #e9c289);
  width: 0.42rem;
  height: 0.09rem;
  top: 24px;
}

.main .friendHelp h1::before {
  left: -.48rem;
  top: .28rem;
}

.main .friendHelp h1::after {
  right: -.42rem;
  top: .28rem;
}

.main .friendHelp ul li {
  margin-top: .2rem;
}

.main .friendHelp ul li img {
  width: 0.32rem;
  height: 0.39rem;
  margin-right: .18rem;
}

.main .friendHelp ul li em {
  font-size: .29rem;
  font-weight: 600;
  color: #333;
}

.main .friendHelp ul li:nth-child(1) em,
.main .friendHelp ul li:nth-child(5) em {
  color: #c1a66f;
}

.main .friendHelp ul li .box1 {
  width: 0.98rem;
  height: 0.28rem;
  border-radius: .28rem;
  background-color: #fb736b;
  color: #fff;
  margin: 0 .07rem;
  font-size: .23rem;
}

.main .friendHelp ul li .box2 {
  background-color: #d8b07a;
  color: #fff;
  height: 0.28rem;
  width: 1.51rem;
  border-radius: .28rem;
  margin-left: .13rem;
  font-size: .23rem;
}